{% extends 'myadmin/base.html' %}
{% block main_body %}
<style>
    .form-card {
        background: #fff;
        border-radius: 6px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        padding: 20px;
    }
    .form-section {
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #f1f1f1;
    }
    .form-row {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -10px;
    }
    .form-col {
        flex: 1;
        min-width: 300px;
        padding: 0 10px;
        box-sizing: border-box;
    }
    .form-group {
        margin-bottom: 12px;
        width: 100%;
    }
    .form-group label {
        font-weight: 600;
        font-size: 13px;
        margin-bottom: 5px;
        display: block;
    }
    .form-control {
        width: 100%;
        padding: 6px 10px;
        font-size: 13px;
        height: 34px;
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-radius: 4px;
    }
    textarea.form-control {
        height: auto;
        min-height: 80px;
        resize: vertical;
    }
    .required-mark {
        color: #dd4b39;
        margin-left: 3px;
    }
    .meal-card {
        border: 1px solid #f1f1f1;
        border-radius: 4px;
        padding: 15px;
        margin-bottom: 15px;
    }
    .btn-group {
        margin-top: 15px;
        display: flex;
        gap: 10px;
        justify-content: flex-end;
    }
    .errorlist {
        color: #dd4b39;
        list-style: none;
        padding: 0;
        margin: 5px 0;
        font-size: 12px;
    }
</style>
<section class="content-header">
    <h1>饮食计划管理 <small>编辑饮食计划</small></h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-home"></i> 首页</a></li>
        <li><a href="#">饮食计划管理</a></li>
        <li class="active">编辑饮食计划</li>
    </ol>
</section>
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">编辑饮食计划信息</h3>
                </div>
                <form method="post" action="{% url 'myadmin_dietplan_update' plan.plan_id %}" class="form-card">
                    {% csrf_token %}
                    {{ detail_formset.management_form }}  <!-- 表单集管理字段 -->
                    
                    <!-- 计划基本信息 -->
                    <div class="form-section">
                        <h4><i class="fa fa-calendar"></i> 计划基本信息</h4>
                        <div class="form-row">
                            <div class="form-col">
                                <div class="form-group">
                                    <label>计划ID</label>
                                    <input type="text" value="{{ plan.plan_id }}" class="form-control" disabled>
                                </div>
                                <div class="form-group">
                                    <label>所属用户 <span class="required-mark">*</span></label>
                                    <select name="user_id" class="form-control" required>
                                    {% for user in users %}
                                    <option value="{{ user.user_id }}" {% if plan.user.user_id == user.user_id %}selected{% endif %}>
                                        {{ user.username }} (ID: {{ user.user_id }})
                                    </option>
                                    {% endfor %}
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>计划名称 <span class="required-mark">*</span></label>
                                    {{ plan_form.plan_name.errors }}
                                    <!-- 显示现有计划名称 -->
                                    <input type="text" 
                                           name="plan_name" 
                                           value="{{ plan.plan_name }}" 
                                           class="form-control" 
                                           required>
                                </div>
                                <div class="form-row">
                                    <div class="form-col" style="flex: 0 0 50%;">
                                        <div class="form-group">
                                            <label>创建时间 <span class="required-mark">*</span></label>
                                            {{ plan_form.created_at.errors }}
                                            <!-- 显示现有创建时间（datetime-local格式） -->
                                            <input type="datetime-local" 
                                                   name="created_at" 
                                                   value="{{ plan.created_at|date:'Y-m-d\TH:i' }}" 
                                                   class="form-control" 
                                                   required>
                                        </div>
                                    </div>
                                    <div class="form-col" style="flex: 0 0 50%;">
                                        <div class="form-group">
                                            <label>更新时间 <span class="required-mark">*</span></label>
                                            {{ plan_form.updated_at.errors }}
                                            <!-- 显示现有更新时间（datetime-local格式） -->
                                            <input type="datetime-local" 
                                                   name="updated_at" 
                                                   value="{{ plan.updated_at|date:'Y-m-d\TH:i' }}" 
                                                   class="form-control" 
                                                   required>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-col">
                                <div class="form-group">
                                    <label>计划备注</label>
                                    {{ plan_form.notes.errors }}
                                    <!-- 显示现有备注 -->
                                    <textarea name="notes" class="form-control" rows="5">{{ plan.notes|default:'' }}</textarea>
                                </div>
                                <!-- 营养目标设置 -->
                                <div class="form-row">
                                    <div class="form-col" style="flex: 0 0 50%;">
                                        <div class="form-group">
                                            <label>目标热量（大卡）</label>
                                            {{ plan_form.target_calories.errors }}
                                            <!-- 显示现有目标热量 -->
                                            <input type="number" 
                                                   name="target_calories" 
                                                   value="{{ plan.target_calories|default:'' }}" 
                                                   class="form-control">
                                        </div>
                                    </div>
                                    <div class="form-col" style="flex: 0 0 50%;">
                                        <div class="form-group">
                                            <label>目标蛋白质（g）</label>
                                            {{ plan_form.protein_target.errors }}
                                            <!-- 显示现有目标蛋白质 -->
                                            <input type="number" 
                                                   name="protein_target" 
                                                   value="{{ plan.protein_target|default:'' }}" 
                                                   step="0.01" 
                                                   class="form-control">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="form-col" style="flex: 0 0 50%;">
                                        <div class="form-group">
                                            <label>目标碳水（g）</label>
                                            {{ plan_form.carbs_target.errors }}
                                            <!-- 显示现有目标碳水 -->
                                            <input type="number" 
                                                   name="carbs_target" 
                                                   value="{{ plan.carbs_target|default:'' }}" 
                                                   step="0.01" 
                                                   class="form-control">
                                        </div>
                                    </div>
                                    <div class="form-col" style="flex: 0 0 50%;">
                                        <div class="form-group">
                                            <label>目标脂肪（g）</label>
                                            {{ plan_form.fat_target.errors }}
                                            <!-- 显示现有目标脂肪 -->
                                            <input type="number" 
                                                   name="fat_target" 
                                                   value="{{ plan.fat_target|default:'' }}" 
                                                   step="0.01" 
                                                   class="form-control">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 餐次详情（可编辑） -->
                    <div class="form-section">
                        <h4><i class="fa fa-cutlery"></i> 餐次详情（每100克）</h4>
                        <div id="meal-container">
                            {% for form in detail_formset %}
                            <div class="meal-card">
                                <!-- 隐藏的ID字段（用于更新已有数据） -->
                                {{ form.id }}
                                
                                <!-- 表单错误信息 -->
                                {% if form.non_field_errors %}
                                <div class="text-danger">{{ form.non_field_errors }}</div>
                                {% endif %}
                                
                                <div class="form-row">
                                    <div class="form-col" style="flex: 0 0 20%;">
                                        <div class="form-group">
                                            <label>餐次类型</label>
                                            {{ form.meal_type.errors }}
                                            <!-- 显示现有餐次类型 -->
                                            <select name="{{ form.meal_type.html_name }}" class="form-control">
                                                {% for choice in form.meal_type.field.choices %}
                                                <option value="{{ choice.0 }}" 
                                                        {% if form.instance.meal_type == choice.0 %}selected{% endif %}>
                                                    {{ choice.1 }}
                                                </option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-col" style="flex: 0 0 30%;">
                                        <div class="form-group">
                                            <label>食物选择</label>
                                            {{ form.food.errors }}
                                            <!-- 显示现有食物选择 -->
                                            <select name="{{ form.food.html_name }}" class="form-control">
                                                {% for food in foods %}
                                                <option value="{{ food.food_id }}" 
                                                        {% if form.instance.food.food_id == food.food_id %}selected{% endif %}>
                                                    {{ food.food_name }}
                                                </option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-col" style="flex: 0 0 15%;">
                                        <div class="form-group">
                                            <label>数量（克）</label>
                                            {{ form.quantity.errors }}
                                            <!-- 显示现有数量 -->
                                            <input type="number" 
                                                   name="{{ form.quantity.html_name }}" 
                                                   value="{{ form.instance.quantity|default:0.00 }}" 
                                                   min="0.01" 
                                                   step="0.01" 
                                                   class="form-control">
                                        </div>
                                    </div>
                                    <div class="form-col" style="flex: 0 0 20%;">
                                        <div class="form-group">
                                            <label>用餐时间</label>
                                            {{ form.meal_time.errors }}
                                            <!-- 显示现有用餐时间 -->
                                            <input type="time" 
                                                   name="{{ form.meal_time.html_name }}" 
                                                   value="{{ form.instance.meal_time|date:'H:i'|default:'' }}" 
                                                   class="form-control">
                                        </div>
                                    </div>
                                    <div class="form-col" style="flex: 0 0 15%;">
                                        <div class="form-group">
                                            <label>备注</label>
                                            {{ form.notes.errors }}
                                            <!-- 显示现有备注 -->
                                            <input type="text" 
                                                   name="{{ form.notes.html_name }}" 
                                                   value="{{ form.instance.notes|default:'' }}" 
                                                   class="form-control">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>

                    <!-- 操作按钮 -->
                    <div class="btn-group">
                        <button type="button" class="btn btn-default" onclick="window.history.back();">返回</button>
                        <button type="reset" class="btn btn-default">重置</button>
                        <button type="submit" class="btn btn-primary">保存修改</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
{% endblock %}